<template>
    <div class="path-index container">
        <Header></Header>
        <section>
            <ul v-if="list.length">
                <li  v-for="(item,index) in list" :key="index" @click="goList(item)">
                    <div>
                        <span>{{item.name}}</span>
                        <span>{{item.tel}}</span>
                    </div>
                    <div class="city">
                        <span class='active' v-if="item.isDefault ==1">[默认]</span>
                        <span>{{item.province}}</span>
                        <span>{{item.city}}</span>
                        <span>{{item.county}}</span>
                        <span>{{item.addressDetail}}</span>
                    </div>
                </li>
            </ul>
            <div v-else>
                <van-empty description="暂无地址" />
            </div>
            <div class="add-address" @click="goList('add')">添加地址</div>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Header from '@/components/path/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue';
import http from '@/common/api/request';
import {mapState,mapMutations} from 'vuex';
import bus from '@/common/bus';
    export default {
        data(){
            return{
                pathStatus:false
            }
        },
        components: { Header,Tabbar },
        created () {
            //从订单页面进来的
            if(this.$route.query.type == 'select'){
                this.pathStatus = true;
            }

            this.getData();
        },
        computed:{
            ...mapState({
                list:state=>state.address.list
            })
        },
         methods:{
            ...mapMutations(['initData']),
            getData(){
                http.$axios({
                    url:'/api/selectAddress',
                    method:"post",
                    headers:{
                        token:true
                    },
                }).then(res=>{
                    this.initData(res.data);
                })
            },
            goList(options){

                //代表从订单页面进入：选择状态
                if(this.pathStatus){
                    bus.$emit('selectPath',JSON.stringify(options));
                    this.$router.go(-1);
                    return;
                }

                this.$router.push({
                    name:'path-list',
                    params:{
                        key:JSON.stringify(options)
                    }
                })
            }
         }   
    }

</script>

<style lang="scss" scoped>
section{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f7f7f7;
    ul{
        width: 100%;
        li{
            padding: .2667rem .4rem;
            margin: .16rem 0;
            background-color: #fff;
            span{
                padding-right: .4rem;
                font-size: .3733rem;
            }
            .active {
                color: #b0352f;
            }
            .city{
                span {
                    padding-right: .16rem;
                }
            }
        }
    }
    .add-address{
        width: 2.6667rem;
        line-height: 1.0667rem;
        margin: 1.0667rem auto 0;
        font-size: .3733rem;
        text-align: center;
        color: #fff;
        background-color: #b0352f;
        border-radius: 3px;
    }
}
::v-deep .tabbar{
    border-top: 2px solid #ccc;
}
</style>